<template>
  <div class="card content-box">
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getTableList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <el-button v-auth="'queue:delay_queue_message:save'" type="primary" :icon="CirclePlus" @click="onSave">
            添加队列消息
          </el-button>
          <el-button
            v-auth="'queue:delay_queue_message:delete'"
            type="danger"
            :icon="Delete"
            plain
            :disabled="!scope.isSelected"
            @click="batchDelete(scope.selectedListIds)"
          >
            批量删除
          </el-button>
          <el-button v-auth="'queue:delay_queue_message:import'" type="primary" :icon="Upload" plain @click="importExcel">
            导入
          </el-button>
          <el-button v-auth="'queue:delay_queue_message:export'" type="primary" :icon="Download" plain @click="exportExcel">
            导出
          </el-button>
        </template>
        <!-- 菜单操作 -->
        <template #operation="scope">
          <el-button v-auth="'queue:delay_queue_message:update'" type="primary" link :icon="EditPen" @click="onUpdate(scope.row)">
            编辑
          </el-button>
          <el-button v-auth="'queue:delay_queue_message:delete'" type="danger" link :icon="Delete" @click="onDelete(scope.row)">
            删除
          </el-button>
        </template>
      </ProTable>
      <DelayQueueMessageOperateDrawer ref="drawerRef"></DelayQueueMessageOperateDrawer>
      <ImportExcel ref="importExcelRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useHandleData } from "@/hooks/useHandleData";
import ImportExcel from "@/components/ImportExcel/index.vue";
import { useDownload } from "@/hooks/useDownload";
import { CirclePlus, Delete, Download, EditPen, Upload } from "@element-plus/icons-vue";
import {
  DelayQueueMessagePageParam,
  DelayQueueMessagePageResult,
  deleteDelayQueueMessage,
  exportDelayQueueMessageExcel,
  getDelayQueueMessageImportTemplate,
  getDelayQueueMessagePage,
  importDelayQueueMessageExcel,
  saveDelayQueueMessage,
  updateDelayQueueMessage
} from "@/api/modules/queue/DelayQueueMessage";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ref } from "vue";
import DelayQueueMessageOperateDrawer from "@/views/queue/delayQueueMessage/DelayQueueMessageOperateDrawer.vue";
import { getEnumDictItem } from "@/api/modules/sys/dict";
import { useRoute } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
import { DATE_TIME_FORMAT } from "@/utils";

// 设置tab的标题信息
const route = useRoute();
const tabStore = useTabsStore();
tabStore.setTabsTitle(`延迟队列: ${route.query.queueName}`);

// 表格配置项
const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 70 },
  {
    prop: "message",
    label: "消息内容"
  },
  {
    prop: "status",
    label: "消息状态",
    enum: () => getEnumDictItem("DelayQueueMessageStatus"),
    search: { el: "select", tooltip: "消息状态" }
  },
  {
    prop: "expectTime",
    label: "预计时间",
    search: {
      el: "date-picker",
      tooltip: "预计时间",
      props: { type: "datetimerange", rangeSeparator: "-", valueFormat: DATE_TIME_FORMAT }
    }
  },
  { prop: "operation", label: "操作", fixed: "right" }
];

const proTable = ref<ProTableInstance>();

const getTableList = (param: DelayQueueMessagePageParam) => {
  // 队列id
  if (typeof route.params.id === "string") {
    param.queueId = route.params.id;
  }
  return getDelayQueueMessagePage(param);
};

const drawerRef = ref<InstanceType<typeof DelayQueueMessageOperateDrawer> | null>(null);

const onSave = () => {
  drawerRef.value?.openDrawer({
    title: "新增",
    isSave: true,
    isUpdate: false,
    row: { queueId: typeof route.params.id === "string" ? route.params.id : "" },
    api: saveDelayQueueMessage,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

const onUpdate = (row: Partial<DelayQueueMessagePageResult> = {}) => {
  drawerRef.value?.openDrawer({
    title: "更新",
    isSave: false,
    isUpdate: true,
    row: { ...row },
    api: updateDelayQueueMessage,
    getTableList: proTable.value?.getTableList,
    enumMap: proTable.value?.enumMap
  });
};

// 删除信息
const onDelete = async (row: DelayQueueMessagePageResult) => {
  await useHandleData(deleteDelayQueueMessage, [row.id], `删除【${row.id}】`);
  proTable.value?.getTableList();
};

// 批量删除
const batchDelete = async (ids: string[]) => {
  await useHandleData(deleteDelayQueueMessage, ids, "删除所选信息");
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};

// 导入
const importExcelRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const importExcel = () => {
  const params = {
    title: "导入延迟队列消息表",
    tempApi: getDelayQueueMessageImportTemplate,
    importApi: importDelayQueueMessageExcel,
    importParams: { queueId: typeof route.params.id === "string" ? route.params.id : "" },
    getTableList: proTable.value?.getTableList
  };
  importExcelRef.value?.acceptParams(params);
};

// 导出
const exportExcel = async () => {
  useDownload(
    exportDelayQueueMessageExcel,
    {
      ...proTable.value?.searchParam,
      queueId: typeof route.params.id === "string" ? route.params.id : ""
    },
    `延迟队列-${route.query.queueName}.xlsx`
  );
};
</script>
